<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="images/医院LOGO.png" type="image/x-icon">  <!--在网页标题左侧显示图标-->
    <link rel="shortcut icon" href="./images/nav.svg" type="image/x-svg">  <!--在收藏夹显示图标-->
    <title>医院门诊中心</title>

    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入此CSS隐藏元素-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!--引入自定义底部版权声明CSS样式-->
<!--    <link rel="stylesheet" href="css/footer.css">-->

    <style>
        #login_body{
            background-image: url("images/医院背景.jpg");
            background-size: 100vw 100vh;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
        #header-area{
            width: 100%;
            height: 10vh;
            /*background-color: rgb(255, 255, 255);*/
            /*↓下面的代码固定导航栏↓*/
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            display: flex;
            flex-direction: row;
            /*-webkit-box-shadow: #f0f2f5 0 1px 5px;*/
            z-index: 1000;
        }
        #center-area{
            width: 100%;
            height: 85vh;
        }
        #footer-area{
            width: 100%;
            height: 5vh;
        }


        #header-left{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: row;
        }

        #header-right{
            width: 50%;
            height: 100%;
        }


        #header-img-div{
            display: inline-block;
        }

        #header-title-div{

        }

        #header-doctor-login{
            position: absolute;
            right: 20px;
            top: 10px;
        }

        #center-div{
            width: 400px;
            height: 600px;
            background-color: white;
            position: relative;
            top: 60px;
            left: 65%;
        }
        #center-title{
            text-align: center;
            position: relative;
            top: 20px;
        }

    </style>


</head>
<body id="login_body">

<!--标题区域-->
<div id="header-area">
    <div id="header-left">
        <div id="header-img-div">
            <img id="header-img" src="images/医院LOGO.png" style="width: 100px;height: 100px" alt="">
        </div>
        <div id="header-title-div">
            <a href="" style="color: rgb(24, 144, 255); text-align: center;font-size: 48px">医院门诊中心</a>
            <p href="" style="font-size: 24px;color: rgb(24, 144, 255);">Hospital outpatient center</p>
        </div>
    </div>

    <div id="header-right">
        <div id="header-doctor-login">
            <a href="" style="color: white; text-align: center;font-size: 18px">医生登录</a>
        </div>
    </div>

</div>


<!--内容区域-->
<div id="center-area">
    <div id="center-div">
        <h1 id="center-title" style="color: rgb(24, 144, 255)">用户登录</h1>
    </div>

</div>


<!--底部版权声明-->
<div id="footer-area"  style="text-align: center;color: white">
    <div>
        <p>2022 基于SSM的门诊管理系统</p>
    </div>
    <div>
        <p>作者：曾晨AllenChen</p>
    </div>
<!--    <div>-->
<!--        <p>版权声明：转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源</p>-->
<!--    </div>-->
</div>



<!--引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>



</body>
</html>